<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<link rel="icon" type="image/png" href="assets/img/favicon.ico">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<title>质量追溯</title>

	<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />


    <!-- Bootstrap core CSS     -->
    <link href="/product/css/bootstrap.min.css" rel="stylesheet" />

    <!-- Animation library for notifications   -->
    <link href="/product/css/animate.min.css" rel="stylesheet"/>

    <!--  Light Bootstrap Table core CSS    -->
    <link href="/product/css/light-bootstrap-dashboard.css" rel="stylesheet"/>


    <!--  CSS for Demo Purpose, don't include it in your project     -->
    <link href="/product/css/demo.css" rel="stylesheet" />
    <link href="/product/css/qiYe.css" rel="stylesheet" />
    <link href="/product/css/suYuan.css" rel="stylesheet" />


    <!--     Fonts and icons     -->
    <link  href="/product/css/fonts.googleapis.com.css" rel="stylesheet">
    <link href="/product/css/font-awesome.min.css" rel="stylesheet">
    <link href="/product/css/pe-icon-7-stroke.css" rel="stylesheet" />

    <style>
        .c{
            width: 80%;
            background: #fff;
            border: 1px solid #ccc;
            padding: 12px 12px;
            vertical-align: middle;
        }
    </style>
</head>
<body>

<div class="wrapper">
    <!--侧导航-->
    <#include '/common/daohang.html' />
    <!--内容区域-->
    <div class="main-panel">
        <nav class="navbar navbar-default navbar-fixed">
            <div class="container-fluid">
                <div class="navbar-header">

                    <a class="navbar-brand" href="#">产品信息</a>
                </div>
                <div class="collapse navbar-collapse">
                    <ul class="nav navbar-nav navbar-right">
                        <li>
                            <a href="/Traceability/suYuan/${code !''}/${id !''}/suYuan">
                                质量追溯首页
                            </a>
                        </li>
                        <li>
                            <a href="/index.html">
                                退出
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
<!--更换的区域-->

        <div class="content">
            <div class="container-fluid">

                <div class="container1"><!--布局外容器-->
                    <table class="table">
                        <tr>
                            <td class="col-sm-2 a">产品名称:</td>
                            <td class="col-sm-4 b" id="productName"></td>
                            <td class="col-sm-2 a">追溯链条:</td>
                            <td class="col-sm-4 b" id="traceabilityChain"></td>
                        </tr>

                        <tr>
                            <td class="col-sm-2 a">所属企业:</td>
                            <td class="col-sm-4 b" id="affiliatedEnterprises"></td>
                            <td class="col-sm-2 a">产品类型:</td>
                            <td class="col-sm-4 b" id="productType"></td>
                        </tr>

                        <tr>
                            <td class="col-sm-2 a">产地:</td>
                            <td class="col-sm-4 b" id="add"></td>
                            <td class="col-sm-2 a">详细地址:</td>
                            <td class="col-sm-4 b" id="address"></td>
                        </tr>

                    </table>
                    <!--<table>
                        <tr>
                            <td class="col-sm-2 a noTop" style="width: 7.55%;">产品介绍:</td>
                            <td class="col-sm-10 b noTop" id="introduce"></td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td class="col-sm-2 a noTop" style="width: 7.55%;">产品防伪:</td>
                            <td class="col-sm-10 b noTop" id="productFy"></td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td class="col-sm-2 a noTop" style="width: 7.55%;">质检报告:</td>
                            <td class="col-sm-10 b noTop">
                                <div class="image-list" id="qualityInspectionReport"></div>
                            </td>
                        </tr>
                    </table>
                    <table>
                        <tr>
                            <td class="col-sm-2 a noTop" style="width: 7.55%;">商品图片:</td>
                            <td class="col-sm-10 b noTop">
                                <div class="image-list" id="pic"></div>
                            </td>
                        </tr>
                    </table>-->
                    <table style="width: 100%">
                        <tbody >
                        <tr>
                            <td class="col-sm-2 a noTop" >产品介绍:</td>
                            <td class="col-sm-10 c noTop" id="introduce"></td>
                        </tr>
                        </tbody>
                    </table>
                    <table style="width: 100%">
                        <tbody >
                        <tr>
                            <td class="col-sm-2 a noTop" >商品图片:</td>
                            <td class="col-sm-10 c noTop">
                                <div class="image-list" id="pic"></div>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

    <!--   Core JS Files   -->
    <script src="/product/js/jquery-1.10.2.js" type="text/javascript"></script>
	<script src="/product/js/bootstrap.min.js" type="text/javascript"></script>

	<!--  Checkbox, Radio & Switch Plugins -->
	<script src="/product/js/bootstrap-checkbox-radio-switch.js"></script>

	<!--  Charts Plugin -->
	<script src="/product/js/chartist.min.js"></script>

    <!--  Notifications Plugin    -->
    <script src="/product/js/bootstrap-notify.js"></script>

    <!--  Google Maps Plugin    -->
    <!---<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>--->

    <!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
	<script src="/product/js/light-bootstrap-dashboard.js"></script>

	<!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
	<script src="/product/js/demo.js"></script>

    <script type="text/javascript" src="/product/js/pictureViewer.js"></script>
    <script type="text/javascript" src="/product/js/jquery.mousewheel.min.js"></script>

	<script type="text/javascript">
    	/*$(document).ready(function(){

        	demo.initChartist();

        	$.notify({
            	icon: 'pe-7s-user',
            	message: "你好！<b>欢迎使用溯源查询系统</b>"

            },{
                type: 'info',
                timer: 4000
            });

    	});*/
	</script>
    <script>
        $(function(){
            var productId = "${id !''}";
            $.ajax({
                async : false,
                cache:false,
                type: 'POST',
                data:{productId:productId},
                dataType : "json",
                url:"/Product/getInformation",
                error: function () {
                    alert('请求数据失败！');
                },
                success:function(data){
                    console.log(data);
                    if (data.code == 200) {
                        if (data.data != null && data.data != "") {
                            var data = data.data;
                            console.log("1");
                            $("#productName").html(data.productName);
                            $("#traceabilityChain").html(data.chainName);
                            $("#affiliatedEnterprises").html(data.enterpriseName);
                            $("#productType").html(data.productType);
                            $("#add").html(data.province + " " + data.city + " " + data.county + " " + data.town + " " + data.village);
                            $("#address").html(data.placeOfOrigin);
                            $("#introduce").html(data.productIntroduction);
                            //$("#productFy").html(data.productFy);
                            var pic1 = "";
                            $.each(data.fileEntities, function (i, item) {
                                pic1 += "<div class=\"cover\">";
                                pic1 += "<div class=\"cover_img\">";
                                pic1 += "<img style=\"margin-left: 5px;\" src=\"\\" + item.urlsPath + "\" alt=\"\">";
                                pic1 += "</div>";
                                pic1 += "</div>";
                            });
                            //$("#qualityInspectionReport").html(pic1);
                            var pic2 = "";
                            $.each(data.fileEntities1, function (i, item) {
                                pic2 += "<div class=\"cover\">";
                                pic2 += "<div class=\"cover_img\">";
                                pic2 += "<img style=\"margin-left: 5px;\" src=\"\\" + item.urlsPath + "\" alt=\"\">";
                                pic2 += "</div>";
                                pic2 += "</div>";
                            });
                            $("#pic").html(pic2);
                        }
                    }

                }
            });
        });
    </script>
    <script>
        $(function () {
            $('.image-list').on('click', '.cover_img', function () {
                var this_ = $(this);
                var images = this_.parents('.image-list').find('.cover_img');
                var imagesArr = new Array();
                $.each(images, function (i, image) {
                    imagesArr.push($(image).children('img').attr('src'));
                });
                $.pictureViewer({
                    images: imagesArr, //需要查看的图片，数据类型为数组
                    initImageIndex: this_.index() + 1, //初始查看第几张图片，默认1
                    scrollSwitch: true //是否使用鼠标滚轮切换图片，默认false
                });
            });
        });
    </script>

</html>
